element ui 表格点击某行折叠或展开有数展示下拉图标

最新推荐文章于 2024-09-09 12:04:46 发布

原创最新推荐文章于 2024-09-09 12:04:46 发布 · 2.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#ui #vue.js #elementui #javascript #前端

本文介绍了一种使用Element UI库实现在表格中嵌套表格的方法。通过定义表格数据和使用特定的Vue.js指令，可以创建可展开行并展示详细信息的表格。此示例包括如何配置点击事件来展开或收起子表格，以及如何为每行添加操作按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现的效果是这样的

这是表格demo

   <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" :row-class-name="getRowClassName" @row-click="rowClick" :row-key="rowKey" :expand-row-keys="nowExpand">
        <el-table-column type="expand">
          <template slot-scope="props" v-if="props.row.children">
            <el-form style="width: 100%;">
              <el-form-item>
                <el-table style="width: 100%;background: none" :data="props.row.children">
                  <el-table-column label="日期" prop="date" align="center">
                  </el-table-column>
                  <el-table-column label="姓名" prop="name" align="center">
                  </el-table-column>
                  <el-table-column label="地址" prop="address" align="center">
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" type="primary" plain>详情</el-button>
                      <el-button size="mini" type="success" @click="handleDelete(scope.$index, scope.row)" plain>录入</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column prop="date" label="日期" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="address" label="地址" align="center">
        </el-table-column>

      </el-table>

这是data中的数据

data(){
return{
    //当前展开行
      nowExpand: [],
//表格数据
      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        children: [{
          id: 31,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          id: 32,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }]
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],}
}

这是方法

  methods: {
//rowkey获取方式 
    rowKey(row) {
      return row.id
    },
//点击该行就添加到显示数组中
    rowClick(row, event, column) {
      if (row.children != null) {
        let index = this.nowExpand.indexOf(row.id)
        if (index == -1) {
          this.nowExpand.push(row.id)
        } else {
          this.nowExpand.splice(index, 1)
        }
      }
    },
//设置没行的样式名称  是否显示下拉箭头
    getRowClassName({ row, rowIndex }) {//有children就显示箭头
      if (!row.children) {
        return 'row-expand-cover';
      } else {
        return 'row-expand-show'
      }
    },
 


  },

style中的内容

  <style lang="scss">
.row-expand-cover .el-table__expand-icon {
  visibility: hidden;
  display: none;
}
.row-expand-show .el-table__cell {
  &:nth-child(2) .el-table__expand-icon {
    visibility: hidden;
    display: none;
  }
}
</style>